<template>
  <view>
    <view v-for="(shop, index) in shops" :key="shop.id" class="shop-card" @click="toShopDetail(shop)">
      <image :src="shop.logo" class="shop-logo" />
      <view class="shop-info">
        <view class="shop-name">{{ shop.name }}</view>
        <view class="shop-rating">
          <uni-rate :value="shop.rating" readonly allow-half size="12" color="#ffd21e" void-color="#eee" />
          <text class="rating-text">{{ shop.rating }}</text>
        </view>
        <view class="shop-meta">
          <text>月售{{ shop.monthlySales }}单</text>
        </view>
        <view class="shop-tags">
          <uni-tag v-for="(tag, i) in shop.tags" :key="i" :text="tag" type="primary" size="small" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    useShopStore
  } from '@/store/shopStore'

  export default {
    name: "shopList",
    props: {
      shops: Object
    },
    data() {
      return {

      };
    },
    methods: {
      // 跳转店铺详情
      async toShopDetail(shop) {
        try {
          const shopStore = useShopStore()
          shopStore.setCurrentShop(shop)

          uni.navigateTo({
            url: `/pages/detail/index?id=${shop.id}&name=${shop.name}`,
            fail: (e) => {
              console.log("跳转失败:", e);
              uni.showToast({
                title: '跳转失败，请重试',
                icon: "none"
              })

            }
          });
        } catch (e) {
          console.log("跳转异常", e);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shop-card {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;

    .shop-logo {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      margin-right: 10px;
    }

    .shop-info {
      flex: 1;

      .shop-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .shop-rating {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        .rating-text {
          margin-left: 5px;
          font-size: 12px;
          color: #ff9600;
        }
      }

      .shop-meta {
        display: flex;
        font-size: 12px;
        color: #666;
        margin-bottom: 5px;

        text {
          margin-right: 10px;
        }
      }

      .shop-tags {
        display: flex;
        flex-wrap: wrap;

        .van-tag {
          margin-right: 5px;
          margin-bottom: 5px;
        }
      }
    }
  }
</style>